
.container{
  z-index: 1;
  .background{
    position: absolute;
    top: 9.68%;
    bottom: 0%;
    width: 100vw;
    height: 90.1vh;
    image{
      width:100%;
      height: 100%;
    }
  }
}
.code{
  font-size: xx-small;
  color:#FFFFFF;
  padding:7rpx 37rpx 7rpx 27rpx;
  position: absolute;
  top: 33vh;
  border: 1.5px solid white;
  border-radius: 36rpx;
  z-index: 1;
}
.rule{
  position: absolute;
  top: calc(24.5vh + 64rpx); width: 75%;

  padding: 12rpx;

  color: white;
  background-color: rgba(0,0,0,0.5);

  font-size: 20rpx;
  white-space: pre-wrap;

  z-index: 1;
}
.content1{
  position: absolute;
  top: 38.376vh;
  z-index: 1;
  .contentBackground1{
    width:90vw;
    height:20.48vh;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .flex-row1{
    margin-left: 4vw;
    position: absolute;
    top: 1vh;
    .title1{
      width:32vw;
      height:3.5vh;
      z-index: 2;
      margin-left: auto;
      margin-right: auto;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .dividingLine1{
      position: relative;
      bottom: 1vh;
      width: 79.73vw;
      height:0.222vh;
      z-index: 2;
      padding-left: 1vw;
      padding-top: 0.5vh;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .process{
      margin-top:7vw;
      width: 82.93vw;
      height: 10.5vh;
      z-index: 2;
      image{
        width: 100%;
        height: 100%;
      }
    }
  }
}
.content2{
  position: absolute;
  top: 60.07vh;
  text-align: center;
  z-index: 1;
  .contentBackground2{
    width: 90vw;
    height:39.93vh ;
    image{
      width:100%;
      height:100%;
    }
  }
  .flex-row2{
    position: absolute;
    top: 1.2vh;
    left: 5.2vw;
    .title2{
      width:39.2vw;
      height:6vh;
      z-index: 2;
      margin-left: auto;
      margin-right: auto;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .dividingLine2{
      position: relative;
      bottom: 3.6vh;
      width: 79.73vw;
      height:0.222vh;
      z-index: 2;
      padding-bottom: 0vh;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .name {
      width: 180rpx;
      height: 2.65vh;
      display: block;
      overflow-wrap: break-word;
      color: rgba(51,51,51,1);
      font-size: 30rpx;
      font-family: PingFangSC-Medium;
      white-space: nowrap;
      line-height: 42rpx;
      text-align: left;
      padding: 0.7vh 0 0 12vw;
    }
    .status{
      position: absolute;
      left: 60vw;
      margin-top: 0.7vh;
      width: 180rpx;
      height: 2.65vh;
      display: block;
      overflow-wrap: break-word;
      color: rgba(51,51,51,1);
      font-size: 30rpx;
      font-family: PingFangSC-Medium;
      white-space: nowrap;
      line-height: 42rpx;

      .pending { color: gray; }
      .success { color: darkgreen; }
      .fail { color: darkred; }
    }
    .info2 {
      width: 348rpx;
      height: 2.55vh;
      display: block;
      overflow-wrap: break-word;
      color: rgba(153,153,153,1);
      font-size: 24rpx;
      font-family: PingFangSC-Regular;
      white-space: nowrap;
      line-height: 34rpx;
      text-align: left;
      padding-top: 0.4vh;
      padding-left: 12vw;
    }
    .avatar{
      margin-top: 0.8vh;
      position: absolute;
      left: 0vw;
      width: 10.67vw;
      z-index: 2;
      border-radius: 100%;
    }
  }
  .path{
    width: 80vw;
    height:0.5997vh;
    z-index: 2;
    padding-bottom: 3vh;
    padding-top: 0vh;
    image{
      width: 100%;
      height: 100%;
    }
  }
}
.van-empty{
    height: 32vh;
}
